<template>
  <el-dialog v-model="visible" :title="title" :width="width" :before-close="handleClose">
    <!-- 插槽：用于放置对话框的内容 -->
    <slot />

    <!-- 插槽：用于放置对话框的底部按钮 -->
    <template #footer>
      <slot name="footer">
        <!-- 默认的底部按钮 -->
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";

// 定义 props
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    default: "提示",
  },
  width: {
    type: String,
    default: "50%",
  },
});

// 定义 emits
const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);

// 计算属性：用于双向绑定
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

// 关闭对话框前的回调
const handleClose = (done: () => void) => {
  emit("cancel");
  done();
};

// 点击确认按钮
const handleConfirm = () => {
  emit("confirm");
  visible.value = false;
};

// 点击取消按钮
const handleCancel = () => {
  emit("cancel");
  visible.value = false;
};
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
</style>
